<template>
    <div class="menuContainer">
        <div class="searchContainer">
            <span class="inputLabel">菜单名称</span>
            <el-input
                v-model="menuName"
                placeholder="菜单名称"
                class="searchInfoInput"
            >
                <template #prepend>
                    <el-select v-model="menuNameSelect" style="width: 90px">
                        <el-option label="中文" value="1" />
                        <el-option label="英文" value="2" />
                    </el-select>
                </template>
            </el-input>

            <span class="inputLabel">状态</span>
            <el-select v-model="menuStatus" placeholder="状态" class="searchInfoInput" clearable>
                <el-option label="正常" value="NORMAL" />
                <el-option label="停用" value="DISABLE" />
            </el-select>

            <el-button type="primary" icon="SearchOutlined" class="searchButtonClass" :loading="searchLoading" @click="queryMenuInfo()">搜索</el-button>
            <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
        </div>
        <div class="insertContainer">
            <el-button type="primary" plain size="small" icon="PlusOutlined" @click="addMenu()">添 加</el-button>
            <el-button plain size="small" icon="UpOutlined" v-if="upOrDownStatus" @click="changeUpOrDownStatus()">展 开</el-button>
            <el-button plain size="small" icon="DownOutlined" v-else @click="changeUpOrDownStatus()">收 起</el-button>
        </div>
        <div class="mainInfoContainer">
            <el-table
                :data="menuDataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :default-expand-all="isExpandAll"
                :stripe="true"
                :expand-row-keys="[]"
                :show-overflow-tooltip="true"
                max-height="70vh"
            >
                <el-table-column prop="name" label="菜单名称-英文" />
                <el-table-column prop="cnName" label="菜单名称-中文" />
                <el-table-column prop="iconType" label="菜单图标" />
                <el-table-column prop="routeTo" label="路由全量地址" />
                <el-table-column prop="routePath" label="路由地址" />
                <el-table-column prop="componentPath" label="菜单组件路径" />
                <el-table-column prop="menuType" label="菜单类型">
                    <template #default="scope">
                        <el-tag v-if="scope.row.menuType === 'COMMON'" type="success">静态路由</el-tag>
                        <el-tag v-else type="danger">动态组件</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="componentName" label="关联组件名称" />
                <el-table-column prop="routeRootName" label="路由文根" />
                <el-table-column prop="hidden" label="是否隐藏" align="center">
                    <template #default="scope">
                        <el-switch v-model="scope.row.hidden" @change="changeMenuIsHidden(scope.row.hidden, scope.row.id)"/>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status === 'NORMAL'" type="success">有 效</el-tag>
                        <el-tag v-else type="danger">禁 用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="400px">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button type="primary" size="small" plain @click="handleJump(scope.$index, scope.row)">跳 转</el-button>
                        <el-button v-if="scope.row.tenantId !== 'base' || currentTenantId === 'ywu'" type="primary" size="small" @click="handleAdd(scope.$index, scope.row)">添 加</el-button>
                        <el-button v-if="scope.row.tenantId !== 'base' || currentTenantId === 'ywu'" size="small" type="success" @click="handleUpdate(scope.$index, scope.row)">修 改</el-button>
                        <el-button v-if="scope.row.tenantId !== 'base' || currentTenantId === 'ywu'" type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
                        <el-button v-if="scope.row.tenantId !== 'base' || currentTenantId === 'ywu'" type="warning" size="small" @click="handleAuthorisation(scope.$index, scope.row)">授 权</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <AddMenuDialog :menuForm="menuForm"/>
        </div>
        <div>
            <DeleteDialog :deleteData="menuForm" header="删除菜单" body="是否确认删除?"/>
        </div>

        <div>
            <MenuRoleAuthorisationDialog :menuRoleAuthorisation="menuRoleAuthorisation"/>
        </div>
    </div>
</template>

<script setup lang="ts" name="menuManage">
import {changeIsHidden, menuAllInfoQuery, menuInfoQuery} from '@/request/menu'
import {createTag} from "@/utils/ywuCommon";
import AddMenuDialog from '@/components/menu/AddMenuDialog.vue'
import DeleteDialog from "@/components/menu/DeleteDialog.vue";
import {componentIconInfoQuery} from "@/request/components";
import MenuRoleAuthorisationDialog from "@/components/menu/MenuRoleAuthorisationDialog.vue";
import {ElNotification} from "element-plus";
import {computed, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useMenuStore} from "@/stores/menu/menu";
import {useUserInfoStore} from "@/stores/userInfo/userInfo";

let router = useRouter();
let route = useRoute();

let menuNameSelect = ref("1");
let menuName = ref("");
let menuStatus = ref("");
let upOrDownStatus = ref(true);
let isExpandAll = ref(false);
let menuForm = ref({
    id: '',
    name: '',
    cnName: '',
    iconType: '',
    routePath: '',
    menuType: 'COMMON',
    componentId: '',
    routeRootId: '',
    componentPath: '',
    status: 'NORMAL',
    parentId: '',
    meta: '{"title": "title"}',
    orderNum: 0
})

let menuRoleAuthorisation = ref({});
let searchLoading = ref(false);

let menuDataList = computed(() => {
    return useMenuStore().menuDataList;
})

let currentTenantId = computed(() => {
    if (useUserInfoStore().userInfo["currentTenantInfo"]) {
        return useUserInfoStore().userInfo["currentTenantInfo"].tenantId;
    } else {
        return "";
    }
})

function queryMenuInfo() {
    searchLoading.value = true;
    let paramDataInfo = {
        status: menuStatus.value === "" ? null : menuStatus.value,
        name: menuNameSelect.value === "2" ? menuName.value : '',
        cnName: menuNameSelect.value === "1" ? menuName.value : ''
    }
    menuInfoQuery(paramDataInfo).then(res => {
        useMenuStore().setMenuDataList(res.data);
        searchLoading.value = false
    }).catch(res => {
        searchLoading.value = false
    })
}

function resetInput() {
    menuNameSelect.value = "1";
    menuName.value = "";
    menuStatus.value = "";
    queryMenuInfo();
}

function changeUpOrDownStatus() {
    upOrDownStatus.value = !upOrDownStatus.value;
    isExpandAll.value = !isExpandAll.value;
}

function addMenu() {
    menuForm.value = {
        id: '',
        name: '',
        cnName: '',
        iconType: '',
        routePath: '',
        menuType: 'COMMON',
        componentId: '',
        routeRootId: '',
        componentPath: '',
        status: 'NORMAL',
        parentId: '',
        meta: '{"title": "title"}',
        orderNum: 0
    }
    updateDialogInfo();
    useMenuStore().resetAddOrUpdateDialog(true);
}

function handleUpdate(index, row) {
    menuForm.value = {
        id: row.id,
        name: row.name,
        cnName: row.cnName,
        iconType: row.iconType,
        routePath: row.routePath,
        menuType: row.menuType,
        componentId: row.componentId,
        routeRootId: row.routeRootId,
        componentPath: row.componentPath,
        status: row.status,
        parentId: row.parentId,
        meta: row.meta,
        orderNum: row.orderNum
    }
    updateDialogInfo();
    useMenuStore().resetAddOrUpdateDialog(true);
}

function handleAdd(index, row) {
    menuForm.value = {
        id: '',
        name: '',
        cnName: '',
        iconType: '',
        routePath: '',
        menuType: row.menuType,
        componentId: row.componentId,
        routeRootId: row.routeRootId,
        componentPath: '',
        status: 'NORMAL',
        parentId: row.id,
        meta: '{"title": "title"}',
        orderNum: 0
    }
    updateDialogInfo();
    useMenuStore().resetAddOrUpdateDialog(true);
}

function handleDelete(index, row) {
    menuForm.value = {
        id: row.id,
        name: row.name,
        cnName: row.cnName,
        iconType: row.iconType,
        routePath: row.routePath,
        menuType: row.menuType,
        componentId: row.componentId,
        routeRootId: row.routeRootId,
        componentPath: row.componentPath,
        status: row.status,
        parentId: row.parentId,
        meta: row.meta,
        orderNum: row.orderNum
    }
    useMenuStore().resetDeleteDialog(true);
}

function updateDialogInfo() {
    let param = {
        pageInfo: {
            pageIndex: 1,
            pageSize: 1000
        }
    }
    componentIconInfoQuery(param).then(res => {
        useMenuStore().resetMenuIcons(res.data);
    });
    menuAllInfoQuery().then(res => {
        let gen = {
            "id": 0,
            "name": "origin",
            "cnName": "根菜单",
        }
        res.data.unshift(gen);
        useMenuStore().resetParentMenuList(res.data);
    })
}

function handleJump(index, row) {
    router.push(row.routeTo);
}

function handleAuthorisation(index, raw) {
    menuRoleAuthorisation.value = raw;
    useMenuStore().resetMenuRoleAuthorisationDialog(true);
}

function changeMenuIsHidden(item, id) {
    let param = {
        id: id,
        hidden: item
    }
    changeIsHidden(param).then(res => {
        ElNotification({
            title: '成功',
            message: "SUCCESS",
            type: 'success',
        })
    })
}

// 查询菜单信息
let paramDataInfo = {
    status: null,
    name: "",
    cnName: ""
}
menuInfoQuery(paramDataInfo).then(res => {
    useMenuStore().setMenuDataList(res.data);
})

// 创建标签
createTag(route);
</script>

<style scoped lang="less">
.menuContainer {
    width: 100%;
    height: 100%;
    padding-top: 0.5%;
    .searchContainer {
        width: 100%;
        height: 5%;
        display: flex;
        align-items: center;
        .searchInfoInput {
            width: 20%;
            margin-left: 1%;
        }
        .inputLabel {
            margin-left: 1%;
            font-weight: 700;
            font-size: 15px;
            color: #606266;
        }
        .searchButtonClass {
            margin-left: 1%;
        }
    }
    .insertContainer {
        width: 98%;
        height: 2%;
        display: flex;
        align-items: center;
        margin-left: 1%;
        padding-top: 1%;
    }
    .mainInfoContainer {
        width: 98%;
        height: 91%;
        margin-left: 1%;
    }
}

.headerRowClass {
    background: #0c4dd2;
}
</style>